
<template>
    <!-- 导航栏 -->
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/home' }">
            <h3>首页</h3>
        </el-breadcrumb-item>

        <el-breadcrumb-item>
            <h3>Device Manager</h3>
        </el-breadcrumb-item>
    </el-breadcrumb>


    <el-row>
        <el-col :offset="2">
            <el-text class="mx-1">
                <h3>请选择将要运行的终端设备</h3>
            </el-text>
        </el-col>

    </el-row>

    <el-row :gutter="1">
        <el-col :span="2">
        </el-col>

        <el-col :span="16">
            <el-checkbox v-model="zhuang" label="充电桩 NETTY" size="large" />
            <el-checkbox v-model="gui" label="充电柜 MQTT" size="large" />
            <el-checkbox v-model="chapai" label="充电插排 MQTT" size="large" />
            <el-checkbox v-model="daozha" label="道闸 MQTT" size="large" />
        </el-col>

        <el-col :span="1.5">
            <el-button size="default" type="primary" @click="rundevice">运行</el-button>
        </el-col>

        <el-col :span="1.5">
            <el-button size="default" type="primary" @click="stopdevice">停止</el-button>
        </el-col>

    </el-row>

    <!-- <el-row class="el-row" :gutter="20">
        <el-col :span="20" :offset="2">
            <el-table :border="true" style="width: 100%" stripe :table-layout="tableLayout">
                <el-table-column prop="id"  label="ID" width="80" />
                <el-table-column prop="mngid" label="mngid" width="300" />
                <el-table-column prop="port1" label="port1" width="160" />
                <el-table-column prop="port2" label="port2" width="160" />
                <el-table-column prop="port3" label="port3" width="160" />
                <el-table-column prop="port4" label="port4" fixed="right" />
            </el-table>
        </el-col>

    </el-row> -->

    <el-row>
        <el-col :offset="10">
            <el-pagination layout="prev, pager, next" :total="50" />
        </el-col>
    </el-row>
</template>


<script setup>
import { ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'    //图标显示引用
import { ElMessage } from 'element-plus';
import { run_device, stop_device } from "../api/workers";

const zhuang = ref(false)
const gui = ref(false)
const chapai = ref(false)
const daozha = ref(false)
const tasklisttable =ref([])


// 设备启动
function rundevice() {
    run_device().then(
        res => {
            console.log(res);
            ElMessage({
                message: '启动成功',
                type: 'success',
            })
        }

    )

}

// 停止设备
function stopdevice() {

    stop_device().then(
        res => {
            console.log(res);

            ElMessage({
                message: "params.value",
                type: 'success',
            })

        }
    )


}



</script>

<style lang="less" scoped>
.mx-1 {
    text-align: left;
    color: red;
    size: 15px;
}
</style>